<!DOCTYPE html>
<!--<html>-->
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>编辑用户</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="/layui.all.js"></script>
		<script type="text/javascript" src="/editor/HandyEditor.min.js"></script>
		<link rel="stylesheet" href="/css/layui.css" />
		<link href="/css/Global.css" rel="stylesheet" type="text/css" media="all" />
	</head>

	<body style="">
				<div class="layui-layout" style="">

			<div class="layui-side layui-bg-black" style="overflow-x: visible;">
				<div th:include="/common/common::header"></div>

				<div class="layui-side-scroll">
					
					<ul class="layui-nav layui-nav-tree site-demo-nav">
						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-home" href="/zhl/index.html" style="font-size: 14px">&nbsp;首页</a>
						</li>

						<li class="layui-nav-item layui-this">
							<a class="layui-icon layui-icon-group" href="/zhl/user.html" style="font-size: 14px">&nbsp;用户管理</a>
						</li>
						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-read" href="/zhl/article.html" style="font-size: 14px">&nbsp;笔记管理</a>
						</li>
						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-headset" style="font-size: 14px" href="/zhl/music.html">&nbsp;音乐管理</a>
						</li>
						<li class="layui-nav-item" style="height: 30px; text-align: center"></li>
						<span class="layui-nav-bar" style="top: 67.5px; height: 0px; opacity: 0;"></span>
					</ul>

				</div>
			</div>
			<div class="layui-body site-demo">
				<div class="layui-layout layui-layout-admin">
					<div class="layui-header">
						<ul class="layui-nav layui-layout-left">
							<li class="layui-nav-item">
								<a href="hard.html"><i class="layui-icon layui-icon-chart-screen layui-ico"></i>用户硬件信息</a>
							</li>
							<li class="layui-nav-item">
								<a href="user.html"><i class="layui-icon layui-icon-group layui-ico"></i>第三方登陆</a>
							</li>
						</ul>
						<ul class="layui-nav layui-layout-right">
							<li class="layui-nav-item">
								<a href="javascript:;">
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<i class="layui-icon layui-icon-set-fill layui-ico"></i>
								</a>
								<dl class="layui-nav-child">
									<dd><a href="">设置</a></dd>
									<dd><a href="">退出</a></dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
				<div class="layui-container" style="margin-top: 100px;">
					<div class="layui-row">
						<form class="layui-form" action="" lay-filter="example">
							<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
								<div class="layui-form-item">
									<label class="layui-form-label">名&nbsp;&nbsp;&nbsp;&nbsp;称</label>
									<div class="layui-input-block">
										<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">昵&nbsp;&nbsp;&nbsp;&nbsp;称</label>
									<div class="layui-input-block">
										<input type="text" name="nickname" lay-verify="title" autocomplete="off" placeholder="请输入昵称" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">状&nbsp;&nbsp;&nbsp;&nbsp;态</label>
									<div class="layui-input-block">
										<input type="checkbox" checked="" name="available" lay-skin="switch" lay-filter="switchTest" lay-text="启用|锁定">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">性&nbsp;&nbsp;&nbsp;&nbsp;别</label>
									<div class="layui-input-block">
										<input type="radio" name="sex" value="男" title="男" checked="">
										<input type="radio" name="sex" value="女" title="女">
									</div>
								</div>
								
								<div class="layui-form-item">
									<label class="layui-form-label">角&nbsp;&nbsp;&nbsp;&nbsp;色</label>
									<div class="layui-input-block">
										<input type="radio" name="role" value="admin" title="超级管理员" checked="">
										<input type="radio" name="role" value="user" title="普通用户">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">三&nbsp;&nbsp;&nbsp;&nbsp;方</label>
									<div class="layui-input-block">
										<input type="text" name="third" lay-verify="title" autocomplete="off" disabled="" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">Openid</label>
									<div class="layui-input-block">
										<input type="text" name="openid" lay-verify="title" autocomplete="off" disabled="" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
									<div class="layui-input-block">
										<input type="text" name="email" lay-verify="title" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">日&nbsp;&nbsp;&nbsp;&nbsp;	期</label>
									<div class="layui-input-block">
										<input type="text" name="createTime" lay-verify="title" autocomplete="off" disabled="" class="layui-input">
									</div>
								</div>
							</div>

							<div class="layui-col-xs12 layui-col-sm4 layui-col-md6 layui-col-md-offset2">
								<div class="layui-form-item" style="width: 300px;">
									<label class="layui-form-label">图&nbsp;&nbsp;&nbsp;&nbsp;像</label>
									<img width="300px" id="cover" height="200px" style="margin-left: 110px;"  />
									<input type="text" name="cover" class="cover" hidden="hidden" />
								</div>
							</div>

							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
								</div>
							</div>

						</form>
					</div>
				</div>
			
			</div>
			<div class="site-tree-mobile layui-hide">
				<i class="layui-icon">&#xe602;</i>
			</div>
			<script>
				layui.use(['form', 'layedit', 'laydate'], function() {
					var form = layui.form,
						layer = layui.layer,
						layedit = layui.layedit,
						laydate = layui.laydate;

					//日期
					laydate.render({
						elem: '#date'
					});
					laydate.render({
						elem: '#date1'
					});

					//创建一个编辑器
					var editIndex = layedit.build('LAY_demo_editor');

					//自定义验证规则
					form.verify({
						title: function(value) {
							if(value.length < 2) {
								return '昵称至少得2个字符啊';
							}
						},
						pass: [/(.+){6,12}$/, '密码必须6到12位'],
						content: function(value) {
							layedit.sync(editIndex);
						}
					});

					//监听指定开关
					form.on('switch(switchTest)', function(data) {
						layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
							offset: '6px'
						});
						layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
					});

					//监听提交
					form.on('submit(demo1)', function(data) {
						layer.alert(JSON.stringify(data.field), {
							title: '最终的提交信息'
						})
						return false;
					});

					//表单初始赋值
					form.val('example', {
						"username": "admin" // "name": "value"
							,
						"nickname": "管理员",
						"third": "QQ用户",
						"available": "启用",
						"email": "itxsl@itxsl.cn",
						"openid": "A1S5DF2A3S8F4A3DFS5SF",
						"createTime": "2018-09-27 08:30",
						"cover": function() {
							$("#cover").attr("src", "/images/banner_bg_1.jpg")
							$(".cover").val("/images/banner_bg_1.jpg")
						}

					})

				});
			</script>
			<script>
				$(function() {
					$(".site-tree-mobile").click(function() {
						$("body").addClass("site-mobile");
						$(".site-mobile-shade").click(function() {
							$("body").removeClass("site-mobile");
						});
					});
				});
			</script>	
	</body>

</html>